@import "~styles/_global.scss";

.avatar {
  @include setFontSize($size-20);

  display: inline-block;
  text-align: center;
}

.image {
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  background: $mulberry-key-lime;
  height: 100px;
  width: 100px;
  margin: 0 auto;
}

.large {
  @include setFontSize($size-22);

  .image {
    height: 150px;
    width: 150px;
  }
}

.small {
  @include setFontSize($size-18);

  .image {
    height: 50px;
    width: 50px;
  }
}

.name {
  margin-top: 0.5em;
}
